<template>
	<div class="theme">
		<van-nav-bar title="提币" left-arrow @click-left="$router.back(-1)">
			<div slot="title">
				<span :class="nav ? 'nav-on' : ''" @click="navChange(1)" style="margin-right: 30px;width: 68px;display: inline-block;">账单</span>
				<span :class="nav ? '' : 'nav-on'" @click="navChange(2)">分享奖励</span>
			</div>
		</van-nav-bar>
		<div class="overlay headTop">
			<div class="overlay-content scrolling">
				<div v-if="nav">
					<div class="bill-title">
						<van-row>
							<van-col span="8">日期</van-col>
							<van-col span="8">账户类型</van-col>
							<van-col span="8">数量</van-col>
						</van-row>
					</div>
					<div class="bill-content">
						<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
							<van-list v-model="loading" :finished="finished" @load="onLoad" :finished-text="noDate">
								<van-row type="flex" align="center" v-for="(el,i) in list" :key="i">
									<van-col span="8" v-text="el.dateTime"></van-col>
									<van-col span="8" v-text="el.type"></van-col>
									<van-col span="8" :class="el.detailType === 1 ? 'red' : 'green'" v-text="el.detailType === 1 ? '+' + parseFloat(el.num).toFixed(5).slice(0,-1) : '-' + parseFloat(el.num).toFixed(5).slice(0,-1)"></van-col>
								</van-row>
							</van-list>
						</van-pull-refresh>
					</div>
				</div>
				<div v-else>
					<div class="bill-content2">
						<van-pull-refresh v-model="isLoading2" @refresh="onRefresh2">
							<van-list v-model="loading2" :finished="finished2" @load="onLoad2" :finished-text="noDate2">
								<div class="bill-card">
									<van-cell :title="el.createTime" is-link v-for="(el,i) in list2" :key="i" @click="toDetail(el)">
										<span v-text="parseFloat(el.reward).toFixed(5).slice(0,-1)"></span>
										<div slot="title">
											{{el.createTime | formatDate}}
										</div>
									</van-cell>
								</div>
							</van-list>
						</van-pull-refresh>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { base } from '../utils/api.js'
	import { formatDate } from './../utils/date';

	export default {
		name: 'billManagement',
		components: {},
		props: {},
		data() {
			return {
				nav: true,
				size: 10, //每页数量
				total: '', //总数量
				list: [],
				listLength: '', //当前总数量
				isLoading: false,
				finished: false,
				loading: false,
				noDate: '没有更多了',
				size2: 10, //每页数量
				total2: '', //总数量
				list2: [],
				listLength2: '', //当前总数量
				isLoading2: false,
				finished2: false,
				loading2: false,
				noDate2: '没有更多了'
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			toDetail(el) {
				this.$router.push({
					name: 'billDetails',
					params: {
						incomeUuid: el.incomeUuid,
						createTime: this.stringToTime(el.createTime)
					}
				})
			},
			navChange(type) {
				this.nav = Number(type) == 1 ? true : false;
				localStorage.nav = type;
			},
			getList() {
				base.getAccountFlow({
					id: 1,
					current: 1,
					size: this.size
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data.records;
						if(this.list == '') {
							this.noDate = '暂无数据';
						}
						this.listLength = res.data.records.length;
						this.total = res.data.total;
						if(this.total > this.listLength) {
							this.size += 10;
							this.loading = false;
						} else {
							// 加载状态结束
							this.finished = true;
							this.loading = false;
						}
					}
				})
			},
			getList2() {
				base.getShareReward({
					current2: 1,
					size2: this.size
				}).then(res => {
					if(res.code == 200) {
						this.list2 = res.data.records;
						if(this.list2 == '') {
							this.noDate2 = '暂无数据';
						}
						this.listLength2 = res.data.records.length;
						this.total2 = res.data.total;
						if(this.total2 > this.listLength2) {
							this.size2 += 10;
							this.loading2 = false;
						} else {
							// 加载状态结束
							this.finished2 = true;
							this.loading2 = false;
						}
					}
				})
			},
			onRefresh() { // 下拉刷新
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
					this.getList();
				}, 500);
			},
			onLoad() { // 上拉加载
				// 异步更新数据
				this.getList();
			},
			onRefresh2() { // 下拉刷新
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading2 = false;
					this.getList2();
				}, 500);
			},
			onLoad2() { // 上拉加载
				// 异步更新数据
				this.getList2();
			},
			stringToTime(str) {
				let time = new Date(str)
				var y = time.getFullYear()
				var m = time.getMonth() + 1
				var d = time.getDate()
				var h = time.getHours()
				var mm = time.getMinutes()
				var s = time.getSeconds()
				return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + time.toTimeString().substr(0, 8)
			}
		},
		created() {},
		mounted() {
			this.navChange(localStorage.nav);
		},
		destroyed() {

		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
			}
		}
	};
</script>

<style lang="less" scoped>
	.overlay-content {
		padding: 30px 10px 10px;
		.bill-title {
			background: #f4b56b;
			color: #FFFFFF;
			padding: 7px;
			border-radius: 10px;
			text-align: center;
		}
		.bill-content {
			text-align: center;
			padding-bottom: 35px;
			.van-row {
				padding: 16px 10px;
				border-bottom: 1px solid #a3d1ce;
			}
		}
		.bill-content2 {
			padding-bottom: 35px;
			.bill-card,
			.van-cell {
				background: #f0a080;
				color: #FFFFFF;
			}
			.bill-card {
				border-radius: 10px;
				margin-bottom: 15px;
			}
			.van-cell {
				border-radius: 10px;
			}
			.van-cell__right-icon {
				color: #954d30;
			}
			.van-cell__value {
				color: #FFFFFF;
			}
		}
	}
	
	.red {
		color: #e83a37;
	}
	
	.green {
		color: #4db34c;
	}
	
	.nav-on {
		display: inline-block;
		font-size: 17px;
		width: 68px;
		height: 64px;
		margin-bottom: 5px;
		border-radius: 100%;
		background: #43add5;
		box-shadow: 1px 0px 1px 0 #43add5;
	}
	
	.van-cell:not(:last-child)::after {
		border-bottom: 0;
	}
	
	.van-hairline--bottom::after {
		border-bottom-width: 0px;
	}
	
	/deep/ .van-nav-bar {
		background-color: #43add5;
	}
	
	/deep/ .van-nav-bar .van-icon {
		color: white;
	}
	
	/deep/ .van-nav-bar__title {
		color: white;
	}
	
	/deep/ .van-nav-bar__arrow {
		font-size: 18px;
	}
	
	.van-pull-refresh {
		overflow: visible!important;
	}
</style>